<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        GeometryEngine
    </title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>

    <!-- <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script> -->
    <script src="js/jquery-2.0.3.min.js"></script>

    <script>
        require([
            "esri/Map",
            "esri/Basemap",
            "esri/views/draw/Draw",
            "esri/tasks/QueryTask",
            "esri/tasks/support/Query",
            "esri/views/SceneView",
            "esri/views/MapView",
            "esri/layers/GraphicsLayer",
            "esri/layers/MapImageLayer",
            "esri/Graphic",
            "esri/geometry/geometryEngine"
        ], function(
            Map,
            Basemap,
            Draw,
            QueryTask,
            Query,
            SceneView,
            MapView,
            GraphicsLayer,
            MapImageLayer,
            Graphic,
            geometryEngine
        ) {
            var basemap = new Basemap({
                baseLayers: [
                    new MapImageLayer({
                        url: "http://www.fqghj.net:8022/arcgis/rest/services/CXGHBZ/YDGHPH/MapServer",
                        title: "Basemap"
                    })
                ],
                title: "basemap",
                id: "basemap"
            });

            var czlayer = new MapImageLayer({
                url: "http://www.fqghj.net:8022/arcgis/rest/services/DG/CZKFBJ0614/MapServer"
            });

            var map = new Map({
                //basemap: "hybrid"
                basemap: basemap,
                layers: [czlayer]
            });

            var view = new MapView({
                center: [-80, 35],
                container: "viewDiv",
                map: map,
                zoom: 3
            });

            const action = draw.create("polygon");
            //聚焦视图以激活用于绘制草图的键盘快捷键
            view.focus();

            $("#draw").click(function() {
                action.on(
                    [
                        "vertex-add",
                        "vertex-remove",
                        "cursor-update",
                        "redo",
                        "undo",
                        "draw-complete"
                    ],
                    updateVertices
                );
            });
            $("#stop").click(function() {

                tool.deactivate();
            });
            //tool.on("draw-complete", DrawGeometry);


            // var polygon = {
            //     type: "polygon", // autocasts as new Polygon()
            //     rings: [
            //         [-64.78, 32.3],
            //         [-66.07, 18.45],
            //         [-80.21, 25.78],
            //         [-64.78, 32.3]
            //     ]
            // };

            // var fillSymbol = {
            //     type: "simple-fill",
            //     color: [227, 139, 79, 0.8],
            //     outline: {
            //         color: [255, 255, 255],
            //         width: 1
            //     }
            // };
            // var polygonGraphic = new Graphic({
            //     geometry: polygon,
            //     symbol: fillSymbol
            // });
            // view.graphics.add(polygonGraphic);

            // var Image = new MapImageLayer({
            //     url: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1234306258,2855098015&fm=26&gp=0.jpg",
            //     //url: "http://www.fqghj.net:8887/arcgis/rest/services/YDHX/HXTEMP/MapServer/0",
            //     title: "Image"
            // });
            // map.add(Image);


            //var tpgkUrl = "http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/1"
            var tpgkUrl = "http://www.fqghj.net:8887/arcgis/rest/services/YDHX/HXTEMP/MapServer/0"
            var queryTask = new QueryTask({
                url: tpgkUrl
            });
            var query = new Query();
            //query.where = "基本单元码=350181-71-A";
            //query.where = "基本单元码 = '350181 - 71 - A'";
            query.where = "PRJNAME = '音西片区中央绿化景观带'";
            // and PRJNAME like '%'";
            //返回所有字段
            query.outFields = ["*"];
            //返回几何信息。
            query.returnGeometry = true;
            queryTask.execute(query).then(function(results) {
                //console.log(results.features[0].geometry);
                var v = results.features[0].geometry;
                var s = geometryEngine.planarArea(v, "square-meters");
                console.log(s);
                //用geodesicArea()会报错
                // var s1 = geometryEngine.geodesicArea(v, "square-meters");
                // console.log(s1);


                //缓冲区分析
                var buffer = geometryEngine.buffer(v, 0.001, "kilometers", false);
                var polySym = {
                    type: "simple-fill",
                    color: [51, 102, 255],
                    outline: {
                        color: [0, 255, 0],
                        width: 2
                    }
                };
                view.graphics.add((new Graphic({
                    geometry: buffer,
                    symbol: polySym
                })));
            });

            // calculateArea(geometry);
            // function calculateArea(polygon) {
            //     return geometryEngine.planarArea(polygon, "square-meters");
            //     // var spatialReference = map.spatialReference;
            //     // if (spatialReference.isWebMercator() || spatialReference.wkid == "4326") {
            //     //     return geometryEngine.geodesicArea(polygon, "square-meters")
            //     // } else {
            //     //     return geometryEngine.planarArea(polygon, "square-meters")
            //     // }
            // };


            //ajax调用python脚本
            function postData(input) {
                $.ajax({
                    type: "POST",
                    url: "/reverse_pca.py",
                    data: {
                        param: input
                    },
                    success: callbackFunc
                });
            }


        });
    </script>
</head>

<body>
    <div id="viewDiv">
        <input id="draw" type="button" value="绘图" />
        <input id="stop" type="button" value="停止" />
    </div>
</body>

</html>